<template>
  <el-row :span="24">
    <el-col :span="18">
      <div class="icon" @click="toggleCollapse">
        <i class="el-icon-minus block"></i>
        <i class="el-icon-minus block"></i>
        <i class="el-icon-minus block"></i>
        <i class="el-icon-minus block"></i>
      </div>
      <el-breadcrumb>
        <el-breadcrumb-item>
          <i class="el-icon-s-home"></i>
          <el-link @click="index" style="cursor:pointer;">首页</el-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumbs"
          :key="index"
          :to="item.path ? { path: item.path } : null"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <!-- el-row表示行，el-col表示列 -->
    <el-col :span="6" style="text-align: right">
      <!-- el-badge可以在按钮上做标记，显示信息数量 -->
      <el-badge :value="2" type="warning" class="my-msg">
        <el-button size="small">消息</el-button>
      </el-badge>
      <!-- el-dropdown实现下拉选项 -->
      <el-dropdown>
        <el-avatar
          :size="50"
          :src="$store.state.userStore.userInfo.avatar"
          style="cursor: pointer; margin-top: 5px"
        >
          <i class="el-icon-user-solid"></i>
        </el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <i class="el-icon-user"></i>
            {{ $store.state.userStore.userInfo.userName }}
          </el-dropdown-item>
          <el-dropdown-item>
            <i class="el-icon-s-check"></i>
            个人中心
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout">
            <i class="el-icon-switch-button"></i>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "TopHeader",
  show: true,
  computed: {
    breadcrumbs() {
      const matched = this.$route.matched
        .filter((route) => !route.meta?.breadcrumbHidden)
        .flatMap(
          (route) =>
            route.meta.breadcrumb?.map((text) => ({
              path: route.path,
              meta: { title: text },
            })) || [{ path: route.path, meta: route.meta }]
        );
      return matched;
    },
  },
  methods: {
    logout() {
      //调用store中的方法，实现注销
      this.$store.commit("logout");
      //提示注销成功
      this.$message.success("注销成功");
      //跳转到登录页面
      this.$router.push({ path: "/login" });
    },
    toggleCollapse() {
      //调用store中的方法，实现侧边栏的收缩和展开
      console.log("收缩和展开");
      this.$store.commit("changeCollapse");
    },

    // 显示标题（支持国际化）
    showTitle(meta) {
      return meta?.title;
    },

    // 判断当前页面
    isCurrentPage(index) {
      return index === this.breadcrumbList.length - 1;
    },
    index() {
      this.$router.push("/");
      
    },
  },
};
</script>

<style>
.my-msg {
  margin-top: -30px;
  margin-right: 20px;
}
.block {
  margin: -12px;
  display: block;
}
.icon {
  cursor: pointer;
  margin-top: 25px;
  margin-right: 10px;
}
/* 面包屑样式覆盖 */
.el-breadcrumb {
  margin: -22px 20px;
  font-size: 16px;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #303133;
  font-weight: 500;
}

.el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner {
  color: #606266;
}

.el-breadcrumb__separator {
  margin: 0 8px;
  color: #909399;
}
</style>
